<template>
  <card cardHeight="142px" noHeader>
    <div class="flex flex-align-center" style="height: 100%">
      <template v-for="(item, index) in moneyList">
        <div class="line" v-if="index > 0"></div>
        <div class="flex-1 money-item flex-align-center">
          <div class="flex flex-align-center">
            <i class="icon" :class="'icon' + (index + 1)"></i>
            <div class="name" :style="{ fontSize: 20 * pageScale + 'px' }">{{ item.text }}</div>
          </div>
          <div class="flex flex-align-end num" :style="{ color: item.color }">
            <img src="/home/symbol.png" alt="" class="symbol" />
            <div class="">
              <ScrollNumber
                :itemStyle="{
                  fontSize: 40 * pageScale + 'px',
                }"
                class="scrollNumber"
                :value="item.value || 0"
              ></ScrollNumber>
            </div>
            <span :style="{ fontSize: 20 * pageScale + 'px' }" style="margin-bottom: 10px">万</span>
          </div>
        </div>
      </template>
    </div>
  </card>
</template>

<script>
import ScrollNumber from '@/components/vue-scroll-number/src/scroll-number';
import { card } from './index';
import { mapState } from 'vuex';
import { priceFormat } from '@/utils/base';
import StatisticsMixins from '../StatisticsMixins';
import { mortgageapi } from '@/api/index.js';

export default {
  mixins: [StatisticsMixins],

  data() {
    return {
      moneyList: [
        {
          text: '总授信金额',
          color: '#06706C',
          value: 0,
          unit: '',
        },
        {
          text: '总用信金额',
          color: '#3468DE',
          value: 0,
          unit: '',
        },
        {
          text: '总评估金额',
          color: '#00BC58',
          value: 0,
          unit: '',
        },
        {
          text: '总抵押金额',
          color: '#0092C5',
          value: 0,
          unit: '',
        },
      ],
    };
  },
  components: { ScrollNumber, card },
  computed: {
    isCanInit() {
      let { globalOrgId, isAdmin } = this;
      return {
        globalOrgId,
        isAdmin,
      };
    },
  },
  props: {
    pageScale: {
      type: [String, Number],
      default: 1,
    },
  },
  created() {},
//   watch: {
//     isCanInit: {
//       handler(newV, oldV) {
//         this.getCreditUseAmount();
//         this.getEvalMortamount();
//       },
//       immediate: true,
//     },
//   },
  methods: {
    getInfo() {
      this.getCreditUseAmount();
      this.getEvalMortamount();
    },
    getCreditUseAmount() {
      this.$postAction(mortgageapi.echartsUrl.getamountl + '?orgId=' + this.globalOrgId).then((da) => {
        if (da.code == 1) {
          console.log(da.data);
          this.moneyList[0].value = priceFormat(
            da.data.creditCost > 1e4 ? this.priceWan(da.data.creditCost) : da.data.creditCost,
            2
          );
          this.moneyList[0].unit = da.data.creditCost > 1e4 ? '万' : '';
          this.moneyList[1].value = priceFormat(
            da.data.useCost > 1e4 ? this.priceWan(da.data.useCost) : da.data.useCost,
            2
          );
          this.moneyList[1].unit = da.data.useCost > 1e4 ? '万' : '';
        }
        console.log('	this.moneyList', this.moneyList);
      });
    },
    getEvalMortamount() {
      this.$postAction(mortgageapi.echartsUrl.getamountr + '?orgId=' + this.globalOrgId).then((da) => {
        if (da.code == 1) {
          this.moneyList[2].value = priceFormat(
            da.data.assessCost > 1e4 ? this.priceWan(da.data.assessCost) : da.data.assessCost,
            2
          );
          this.moneyList[2].unit = da.data.assessCost > 1e4 ? '万' : '';
          this.moneyList[3].value = priceFormat(
            da.data.pledgeCost > 1e4 ? this.priceWan(da.data.pledgeCost) : da.data.pledgeCost,
            2
          );
          this.moneyList[3].unit = da.data.pledgeCost > 1e4 ? '万' : '';
        }
      });
    },
    priceWan(num) {
      return (Math.floor(num / 100) * 100) / 10000;
    },
  },
};
</script>

<style scoped lang="less">
.money-item {
  padding-left: 90px;
  .name {
    color: #24292e;
    font-size: 20px;
    font-weight: bold;
    margin-left: 8px;
  }
  .num {
    display: flex;
    align-items: end;
  }
  .icon {
    height: 30px;
    width: 30px;
    display: block;
    background: no-repeat center center;
    background-size: 100% auto;
    &.icon1 {
      background-image: url(/home/icon1.png);
    }
    &.icon2 {
      background-image: url(/home/icon2.png);
    }
    &.icon3 {
      background-image: url(/home/icon3.png);
    }
    &.icon4 {
      background-image: url(/home/icon4.png);
    }
  }
  .symbol {
    height: 27px;
    width: 27px;
    display: block;
    margin-right: 8px;
    margin-bottom: 10px;
  }
  .num {
    font-weight: bold;
    // font-family: 'din';
  }
}
.line {
  width: 1px;
  height: 90px;
  background: rgba(232, 232, 232, 0.39);
}
</style>
